import React, { Component } from 'react'
import { Redirect, Switch, Route, NavLink } from 'react-router-dom'
export default class Home extends Component {
    constructor() {
        super()
        this.state = {
            List: []
        }
    }
    componentDidMount() {
        fetch("https://cnodejs.org/api/v1/topics?limit=10").then(res => res.json())
            .then(data => {
                this.setState({
                    List: data.data
                })
            })
    }
    ajax(tab, page) {
        fetch("https://cnodejs.org/api/v1/topics?limit=10&tab=" + this.props.location.pathname.split(":")[1] + "&page=" + page).then(res => res.json())
            .then(data => {
                console.log(data)
                this.setState({
                    List: data.data
                })
            })
    }
    render() {
        return (
            <div>
                <div className="col-md-11 col-md-offset-1">
                    <NavLink onClick={() => this.ajax("ask")} to='/Home/:ask'>全部</NavLink>
                    <NavLink onClick={() => this.ajax("ask")} to='/Home/:share'>精华</NavLink>
                    <NavLink onClick={() => this.ajax("share")} to='/Home/:job'>分享</NavLink>
                    <NavLink onClick={() => this.ajax("job")} to='/Home/:ask'>问答</NavLink>
                    <NavLink onClick={() => this.ajax("good")} to='/Home/:ask'>招聘</NavLink>
                    <NavLink onClick={() => this.ajax("good")} to='/Home/:ask'>客户端测试</NavLink>
                </div>
                {this.state.List.map((item, index) => {
                    return <div key={index}>
                        <p><span></span><span>{item.reply_count}</span>/<span>{item.visit_count}</span><NavLink to={'/Ditais/' + item.id}>{item.title}</NavLink><span></span></p>
                    </div>
                })}
                <nav aria-label="Page navigation">
                    <ul className="pagination">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li><a onClick={() => this.ajax("ask", 1)}>1</a></li>
                        <li><a onClick={() => this.ajax("ask", 2)}>2</a></li>
                        <li><a onClick={() => this.ajax("ask", 3)}>3</a></li>
                        <li><a onClick={() => this.ajax("ask", 4)}>4</a></li>
                        <li><a onClick={() => this.ajax("ask", 5)}>5</a></li>
                        <li><a>...</a></li>
                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        )
    }
}
